<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>10-子绝父相-盒子垂直水平都居中</title>
		<style type="text/css">
			/*
				总结：
				1.父盒子有相对定位position:relative;
				2.子盒子有宽度
				{
					position:absolute;
					子盒子移动父盒子的一半
					left:50%;
					子盒子沿着负方向再移动自身的一半
					transform: translateX(-50%);
				}
			*/
			*{
				margin:0;
				padding:0;
			}
			.box{
				width:600px;
				height:400px;
				background:red;
				/* 父盒子相对定位 */
				position: relative;
				margin: 30px auto;
			}
			.box .content{
				width:200px;
				height:100px;
				background: orange;
				/* 方法一 */
				/* position: absolute; */
				/* left: 200px; */
				/* 方法二 */
				/* margin-left:200px; */
				/* 方法三 */
				/* margin: 0 auto; */
				position: absolute;
				/* 让子盒子向右移动父盒子的一半 */
				left:50%;
				top: 50%;
				/* margin-left:-100px;不可取 */
				/* 再让子盒子负方向移动自己的50% */
				/* transform: translateX(-50%); */
				transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="content"></div>
		</div>
	</body>
</html>

